import React from 'react'
import { BorderBox12,BorderBox7,Decoration9,ScrollBoard,ScrollRankingBoard,WaterLevelPond,PercentPond,CapsuleChart} from '@jiaminghi/data-view-react'
import { Row, Col, PageHeader } from 'antd';

import './index.less'

export default function LeftContent() {
    let config = {
        header: ['名称', '标识符', '属性值'],
        data: [
            ['<span style="color:#37a2da;">齿轮A</span>', 'XW-10001', '43'],
            ['齿轮B', '<span style="color:#32c5e9;">XW-10001</span>', '42'],
            ['齿轮C', '行3列2', '<span style="color:#67e0e3;">XW-10001</span>'],
            ['齿轮A', '<span style="color:#9fe6b8;">XW-10001</span>', '34'],
            ['<span style="color:#ffdb5c;">齿轮A</span>', 'XW-10001', '53'],
            ['齿轮B', '<span style="color:#ff9f7f;">XW-10001</span>', '42'],
            ['齿轮C', 'XW-10001', '<span style="color:#fb7293;">24</span>'],
            ['齿轮D', '<span style="color:#e062ae;">XW-10001</span>', '12'],
            ['<span style="color:#e690d1;">齿轮A</span>', 'XW-10001', '33'],
            ['齿轮E', '<span style="color:#e7bcf3;">XW-10001</span>', '21']
        ],
        index: true,
        columnWidth: [50],
        align: ['center']
    }
    let config_w1 = {
        data: [55],
        shape: 'round'
    }
    let config_p1 = {
        value: 66,
        localGradient: true
    }
    let config_c1 = {
        data: [
          {
            name: '齿轮A',
            value: 167
          },
          {
            name: '齿轮B',
            value: 123
          },
          {
            name: '齿轮C',
            value: 98
          },
          {
            name: '齿轮D',
            value: 67
          },
          {
            name: '齿轮E',
            value: 55
          },
        ]
      }
    return (
        <div className="left-view">
            <div className="left-1">
                <BorderBox12 color={['#1a1d2f', '#1a1d2f']} >
                    <div className="cy-card-title">
                        <h3>设备占比</h3>
                    </div>
                    <Row justify="space-around">
                        <Col span={6}>
                            <PercentPond config={config_p1} style={{width: '100px', height: '80px'}} />
                        </Col>
                        <Col span={6}>
                            <WaterLevelPond config={config_w1} style={{width: '100px', height: '100px'}} />
                        </Col>
                        <Col span={6}>
                            <Decoration9 style={{width: '100px', height: '100px'}}>60%</Decoration9>
                        </Col>
                    </Row>
                </BorderBox12>
            </div>
            <div className="left-2">
                <BorderBox12 color={['#1a1d2f', '#1a1d2f']}>
                    <div className="cy-card-title">
                        <h3>告警排行</h3>
                    </div>
                   
                    <div className="left-content">
                        <CapsuleChart config={config_c1} style={{width:"100%",height:"100%"}} />
                    </div>
                </BorderBox12>
            </div>
            <div className="left-3">
                <BorderBox12 color={['#1a1d2f', '#1a1d2f']}>
                    <div className="cy-card-title">
                        <h3>实时数据</h3>
                    </div>
                    <div className="left-content">
                        <ScrollBoard config={config} style={{width: '100%', height: '100%'}} />
                    </div>
                </BorderBox12>
            </div>
        </div>
    )
}
